<template>
  <div>
    <el-dialog v-model="model" title="设置权限" width="500" :close-on-click-modal="false">
      <menuTree ref="menuTreeRef" :isCheckBox="true"/>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import router from '@/router'
import { moduleExpression } from '@babel/types'
import user from '@/config/Enums/user'
import Pinterface from '@/config/Interface/Public'
import Interface from '@/config/Interface/User'
import { defineComponent,ref,onMounted,reactive,toRefs} from 'vue'
import { getCurrentInstance} from 'vue'
import { useStore } from '../../store'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import {createUserApi,updateUserApi} from '@/request/user'
import { createRoleApi, updateRoleApi,bindMenuApi } from '@/request/role'
import menuTree from '../menu/menuTree.vue'
import { fa } from 'element-plus/es/locale'
export default defineComponent({
  name: 'addUser',
  components: {

  },
  setup(props,{ emit }){
    const store = useStore()
    const context = getCurrentInstance()?.appContext.config.globalProperties; //获取this
    const msg = reactive<any>({})
    const model =ref(false) // 模态框显示隐藏
    const menuTreeRef = ref()
    let role_id:number =  0
    const reactiveData = reactive({

    })
    const curPowers = ref([])
    const trigger = (scope?:any) =>{
      console.log(scope);
      role_id = scope.row.id
      curPowers.value = scope.row.powers.map((item:any)=>(item.menu_id))
      model.value = true
      setTimeout(()=>{
        menuTreeRef.value!.setChanged(curPowers.value)
      },100)
        
    }


    // 关闭表单
    const close = () => {
      // reactiveData.form = new Interface.addUserForm()
      model.value = false;
      menuTreeRef.value!.clear()
    }
    // 提交表单
    const submitForm = async () => {
      const postData = {
        id:role_id,
        menu_ids:menuTreeRef.value!.getSelectedTreeKey()
      }
      const res = await bindMenuApi(postData)
      if(res.data.code === 1){
        ElMessage({
          type: 'success',
          message: '更新成功',
        })
        close()
        setTimeout(()=>{
          emit('RefreshListEmit')
        },200)
      }
    }



    return {
      ...toRefs(reactiveData),
      model,
      trigger,
      submitForm,
      close,
      curPowers,
      menuTreeRef
    }
  }
})
</script>

<style scoped lang="stylus">
</style>
